<!--幻灯片组件-->
<template>
  <div class="login-content">
    <transition name="fades">
      <div class="mask" v-if="isShow"></div>
    </transition>
    <transition name="popup">
      <div class="login-form" v-if="isShow">
        <!--顶部TAB-->
        <div class="loginTab">
          <span :class="{ active: isUserLoginShow }" @click="handleClick('userLogin')">账户登录</span>
          <span :class="{ active: !isUserLoginShow }" @click="handleClick('codeLogin')">二维码登录</span>
          <i class="closePopup" @click="closePopup">
            <i class="el-icon-close" style="font-size: 18px;"></i>
          </i>
        </div>
        <!--账户登录-->
        <div v-if="isUserLoginShow" class="userLoginSty">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
            <el-form-item prop="loginName">
              <el-input v-model="ruleForm.loginName" placeholder="邮箱/用户名/已验证手机"></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input v-model="ruleForm.password" placeholder="6-16位密码，区分大小写，不能用空格" type="password"></el-input>
            </el-form-item>
            <div class="forget">
              <a>忘记密码</a>
            </div>
            <el-form-item>
              <el-button type="danger" @click="submitForm('ruleForm')" style="width:100%;font-size: 16px;"
                         :loading="subLoading">登录
              </el-button>
            </el-form-item>
          </el-form>
          <div class="login-png">
            <span>其他登录方式</span>
            <span><img src="../../assets/icon-qq.png"></span>
            <span><img src="../../assets/icon-weixin.png"></span>
          </div>
        </div>
        <!--二维码登录-->
        <div v-else>

        </div>
      </div>
    </transition>
  </div>
</template>

<script>
  export default {
    name: 'login',
    props: {
      isShow: Boolean,
      default: false
    },
    data () {
      return {
        activeName: 'userLogin',
        isUserLoginShow: true,
        subLoading: false,
        ruleForm: {
          loginName: '',
          password: ''
        },
        rules: {
          loginName: [
            {required: true, message: '请输入用户名称', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '请输入密码', trigger: 'blur'},
            {min: 6, max: 16, message: '6-16位密码，区分大小写，不能用空格', trigger: 'blur'}
          ]
        }
      }
    },
    methods: {
      // tab切换
      handleClick(){
        this.isUserLoginShow = !this.isUserLoginShow;
      },
      // 表单提交
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            console.log(this.ruleForm.loginName + '=====' + this.ruleForm.password);
            this.closePopup();
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      // 关闭登录弹窗
      closePopup(){
        this.$emit('close-popup')
      }
    },
    mounted(){
      console.log('login');
    }
  }
</script>

<style lang="scss" rel="stylesheet/scss" type="text/css" scoped>
  .fades-enter-active, .fades-leave-active {
    transition: all .3s ease;
  }

  .fades-enter, .fades-leave-active {
    opacity: 0;
  }

  .popup-enter-active, .popup-leave-active {
    transition: all .3s ease;
  }

  .popup-enter, .popup-leave-active {
    transform: translateY(50px);
    opacity: 0;
  }

  .login-content {
    height: 100%;
    width: 100%;
  }

  .mask, .login-form {
    position: fixed;
  }

  .mask {
    background-color: #000;
    opacity: .6;
    z-index: 5;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .login-form {
    z-index: 10;
    width: 360px;
    top: 20%;
    left: 50%;
    margin-left: -190px;
    background-color: #fff;
    height: 350px;
    padding: 10px 20px;
  }

  .userLoginSty > form > div {
    margin-top: 20px;
  }

  .loginTab {
    height: 50px;
    margin-top: 5px;
    margin-bottom: 25px;
    border-bottom: 1px solid gainsboro;
    position: relative;
  }

  .loginTab > span {
    cursor: pointer;
    display: inline-block;
    width: 90px;
    text-align: center;
    height: 50px;
    line-height: 50px;
    color: #787d82;
    font-size: 14px;
  }

  .loginTab > span:hover {
    border-bottom: 1px solid #f01400;
    color: #f01400 !important;
  }

  .active {
    border-bottom: 1px solid #f01400;
    color: #f01400 !important;
  }

  .forget {
    color: #787d82;
    text-align: end;
    cursor: pointer;
  }

  .forget > a:hover {
    color: #f01400 !important;
  }

  .closePopup {
    cursor: pointer;
    position: absolute;
    right: 0;
    top: 12px;
  }

  .login-png > span {
    display: inline-block;
    height: 26px;
    line-height: 24px;
    vertical-align: top;
  }

  .login-png > span:not(:nth-child(1)) {
    width: 26px;
    border-radius: 50% 50%;
    background-color: #b5b9bc;
    margin-left: 10px;
    cursor: pointer;
  }

  .login-png > span > img {
    height: 20px;
    width: 20px;
    margin: 3px;
  }

  .login-png > span:nth-child(2):hover {
    background-color: #30a5dd;
  }

  .login-png > span:nth-child(3):hover {
    background-color: #2dc100;
  }
</style>
